<template>
  <div>
    <Title :title="title"></Title>
    <div ref="chartContainer" style="height: 380px;"></div>
  </div>
</template>

<script setup>
import { Area } from '@antv/g2plot';
import Title from './Title.vue';
import { ref, onMounted } from 'vue';

const title = ref('南通市崇川区污水排放量趋势（2025年）');
const chartContainer = ref(null);

// 生成崇川区污水排放量模拟数据
const generateSewageData = () => {
  const districts = [
    '狼山镇街道', '钟秀街道', '文峰街道', 
    '观音山街道', '学田街道', '新城桥街道'
  ];
  
  const data = [];
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  
  districts.forEach(district => {
    months.forEach(month => {
      // 生成每个街道每月的模拟数据（单位：万吨）
      const baseValue = 10 + Math.random() * 5;
      const seasonalFactor = 0.8 + 0.4 * Math.sin(parseInt(month) * Math.PI / 6);
      data.push({
        district,
        month,
        value: Math.round((baseValue * seasonalFactor + Math.random() * 3) * 10) / 10
      });
    });
  });
  
  return data;
};

const loadChart = () => {
  const data = generateSewageData();
  
  // 筛选狼山镇街道数据作为示例
  const wolfMountainData = data.filter(item => item.district === '狼山镇街道');
  
  const area = new Area(chartContainer.value, {
    data: wolfMountainData,
    xField: 'month',
    yField: 'value',
    seriesField: 'district',
    color: '#1E9493', // 使用水务主题的蓝绿色
    areaStyle: {
      fillOpacity: 0.6,
      fill: 'l(270) 0:#1E9493 1:#A0E8E5' // 渐变填充
    },
    line: {
      color: '#1E9493',
      size: 3
    },
    point: {
      size: 4,
      shape: 'circle',
      style: {
        fill: '#1E9493',
        stroke: '#fff',
        lineWidth: 2
      }
    },
    xAxis: {
      label: {
        style: {
          fill: '#666',
          fontSize: 12
        }
      }
    },
    yAxis: {
      label: {
        style: {
          fill: '#666'
        },
        formatter: (v) => `${v}万吨`
      },
      grid: {
        line: {
          style: {
            stroke: '#f0f0f0'
          }
        }
      }
    },
    label: {
      style: {
        fill: '#333',
        fontSize: 12
      },
      formatter: (item) => {
        return item.value.toFixed(1);
      }
    },
    tooltip: {
      domStyles: {
        'g2-tooltip': {
          background: '#fff',
          boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
          borderRadius: '4px'
        },
        'g2-tooltip-title': {
          color: '#333',
          fontWeight: 'bold'
        },
        'g2-tooltip-list-item': {
          color: '#333'
        }
      },
      formatter: (datum) => {
        return {
          name: '排放量',
          value: `${datum.value}万吨`
        };
      }
    },
    interactions: [{ type: 'element-active' }],
    animation: {
      appear: {
        animation: 'wave-in',
        duration: 2000
      }
    },
    meta: {
      value: {
        alias: '污水排放量',
        formatter: (v) => `${v}万吨`
      }
    }
  });

  area.render();
};

onMounted(() => {
  loadChart();
});
</script>

<style lang="less" scoped>
// 可以添加自定义样式
</style>